<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <h3 class="title">智慧物业管理系统</h3>
      <!-- 注销 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="content">
      <div class="content-left">
        <!-- 左边菜单 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#5dd5c8"
        >
          <el-menu-item index="1" @click="tabchange(1)">
            <i class="el-icon-user"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>

          <el-submenu index="10">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>房产信息</span>
            </template>
            <el-menu-item index="2" @click="tabchange(2)"
              >房屋信息列表</el-menu-item
            >
            <el-menu-item index="9" @click="tabchange(9)"
              >录入房产信息</el-menu-item
            >
          </el-submenu>

          <el-menu-item index="8" @click="tabchange(8)">
            <i class="el-icon-tickets"></i>
            <span slot="title">租赁信息</span>
          </el-menu-item>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>物业管理</span>
            </template>
            <el-menu-item index="4" @click="tabchange(4)"
              >收费管理</el-menu-item
            >
            <el-menu-item index="5" @click="tabchange(5)"
              >设备管理</el-menu-item
            >
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>客户管理</span>
            </template>
            <el-menu-item index="7" @click="tabchange(7)"
              >客户列表</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </div>

      <!-- 个人中心 -->
      <div class="content-right" v-if="tabIndex == 1">
        <user-info></user-info>
      </div>

      <!-- 房屋信息 -->
      <div class="content-right" v-if="tabIndex == 2">
        <div class="searchBtn" style="display: flex">
          <el-input
            v-model="search_house"
            size="big"
            placeholder="请输入所属人姓名"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getHouseList()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="list_house"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column
            label="房产地址"
            prop="houseAddress"
          ></el-table-column>
          <el-table-column
            label="成交日期"
            prop="fixtureTime"
            width="160"
          ></el-table-column>
          <el-table-column label="所属人" prop="master" width="160"></el-table-column>
          <el-table-column label="成交价" prop="price" width="160"></el-table-column>
          <el-table-column label="产权" prop="propertyRight" width="160"></el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="success"
                icon="el-icon-download"
                @click="downFile(scope.row)"
                >附件</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="updateHouse(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-edit"
                @click="deleteHouse(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getHouseList"
          :current-page.sync="pageNo_house"
          :page-size="pageSize"
          :total="total_house"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-house
            v-if="showComp"
            :item="houseDetail"
            :clearComp="clearComp"
          ></update-house>
        </el-dialog>
      </div>

      <div class="content-right" v-if="tabIndex == 9">
        <add-house></add-house>
      </div>

      <!-- 收费列表 -->
      <div class="content-right" v-if="tabIndex == 4">
        <div class="searchBtn" style="display: flex">
          <el-input
            v-model="search_charge"
            size="big"
            placeholder="请输入收费户名"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getChargeList()"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="height: 40px"
            @click="addCharge()"
            >添加
          </el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="list_charge"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column
            label="操作人"
            prop="chargeUserName"
          ></el-table-column>
          <el-table-column label="收费项" prop="chargeType"></el-table-column>
          <el-table-column label="业主" prop="houseUser"></el-table-column>
          <el-table-column label="缴费" prop="money"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>

          <el-table-column label="缴费方式" prop="type">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type == '0'"
                >物业收费</el-tag
              >
              <el-tag type="warning" v-if="scope.row.type == '1'"
                >自主缴费</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteCharge(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getChargeList"
          :current-page.sync="pageNo_charge"
          :page-size="pageSize"
          :total="total_charge"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <add-charge v-if="showComp" :clearComp="clearComp"></add-charge>
        </el-dialog>
      </div>

      <!-- 设备列表 -->
      <div class="content-right" v-if="tabIndex == 5">
        <div class="searchBtn" style="display: flex">
          <el-input
            v-model="search_charge"
            size="big"
            placeholder="请输入收费户名"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getChargeList()"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="height: 40px"
            @click="addCharge()"
            >添加
          </el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="list_device"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column label="设备名" prop="deviceName"></el-table-column>
          <el-table-column label="数量	" prop="num"></el-table-column>
          <el-table-column label="购买人" prop="createByName"></el-table-column>
          <el-table-column label="购买时间" prop="createTime"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteDevice(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getDeviceList"
          :current-page.sync="pageNo_device"
          :page-size="pageSize"
          :total="total_device"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <add-Device v-if="showComp" :clearComp="clearComp"></add-Device>
        </el-dialog>
      </div>

      <!-- 租赁 -->
      <div class="content-right" v-if="tabIndex == 8">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search_rent" size="big" placeholder="请输入租户" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getRentList()"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="height: 40px"
            @click="addCharge()"
            >添加
          </el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="list_rent"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column label="租赁人" prop="rentUser"></el-table-column>
          <el-table-column label="租房地址" prop="rentInfo"></el-table-column>
          <el-table-column label="租金" prop="pay"></el-table-column>
          <el-table-column label="租赁时间" prop="rentStart"></el-table-column>
          <el-table-column label="到期时间" prop="rentEnd"></el-table-column>
          <!-- <el-table-column label="房东" prop="houseMaster"></el-table-column> -->
          <el-table-column label="租赁状态" prop="createTime">
            <el-tag type="success">生效中</el-tag>
          </el-table-column>

          <el-table-column align="right">
            <template slot-scope="scope">
              <!--  <el-button
                type="success"
                icon="el-icon-download"
                @click="outPut(scope.row)"
                >导出</el-button
              > -->

              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteRent(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getRentList"
          :current-page.sync="pageNo_rent"
          :page-size="pageSize"
          :total="total_rent"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <add-rent v-if="showComp" :clearComp="clearComp"></add-rent>
        </el-dialog>
      </div>

      <!-- 客户 -->
      <div class="card-list" v-if="tabIndex == 7">
        <div class="card-item" v-for="custom in list2" :key="custom.id">
          <div class="card-img"><img :src="petImage(custom)" /></div>
          <div class="card-title">{{ custom.name }}</div>
          <div class="card-bottom">
            <div class="card-text">联系电话: {{ custom.phone }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import userInfo from "../components/userInfo.vue";
import userRequest from "../request/user";
import updateHouse from "../components/updateHouse.vue";
import addCharge from "../components/addCharge.vue";
import addHouse from "../components/addHouse.vue";
import addDevice from "../components/addDevice.vue";
import addRent from "../components/addRent.vue";
import axios from "../request/axios";
import adminRequest from "../request/admin";
export default {
  data() {
    return {
      loading: false, //加载状态开关
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关
      userinfo: null,
      username: "",
      tabIndex: "1",
      pageSize: 5,

      list_house: null,
      search_house: null,
      pageNo_house: 1,
      total_house: null,
      houseDetail: [],

      list_charge: null,
      search_charge: null,
      pageNo_charge: 1,
      total_charge: null,
      chargeDetail: [],

      list_device: null,
      search_device: null,
      pageNo_device: 1,
      total_device: null,
      deviceDetail: [],

      list_rent: null,
      search_rent: null,
      pageNo_rent: 1,
      total_rent: null,
      rentDetail: [],

      list2: [],
      search2: null,
      pageNo_customer: 1,
      total_customer: null,
    };
  },
  components: {
    userInfo,
    updateHouse,
    addCharge,
    addHouse,
    addDevice,
    addRent,
  },

  methods: {
    // 关闭对话框
    clearComp() {
      this.showComp = false;
      this.dialogVisible = false;
      this.getHouseList();
      this.getChargeList();
      this.getDeviceList();
      this.getRentList();
    },

    // 菜单切换
    tabchange(index) {
      this.tabIndex = index;
      this.loading = true;

      switch (index) {
        case 2:
          this.getHouseList();
          break;
        case 4:
          this.getChargeList();
          break;
        case 5:
          this.getDeviceList();
          break;
        case 7:
          this.getCustomerList();
          break;
        case 8:
          this.getRentList();
          break;
      }
    },

    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功!");
    },

    // 房产
    getHouseList(page = 1) {
      this.pageNo = page;
      userRequest
        .getHouseList({
          pageNo: this.pageNo_house,
          pageSize: this.pageSize,
          master: this.search_house,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_house = result.total;
            this.list_house = result.records;
            console.log(this.list_house);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    downFile(item) {
      window.location.href =
        axios.defaults.baseURL + "centre/centre/file/getPhoto/" + item.dataId;
    },

    updateHouse(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.houseDetail = item;
    },


    deleteHouse(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userRequest.deleteHouse(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getHouseList();
            }
          });
        })
        .catch(() => {});
    },

    // 物业收费
    getChargeList(page = 1) {
      this.pageNo = page;
      userRequest
        .getChargeList({
          pageNo: this.pageNo_charge,
          pageSize: this.pageSize,
          houseUser: this.search_charge,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_charge = result.total;
            this.list_charge = result.records;
            console.log(this.list_charge);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    addCharge() {
      this.dialogVisible = true;
      this.showComp = true;
    },

    deleteCharge(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userRequest.deleteCharge(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getChargeList();
            }
          });
        })
        .catch(() => {});
    },

    // 设备管理
    getDeviceList(page = 1) {
      this.pageNo = page;
      userRequest
        .getDeviceList({
          pageNo: this.pageNo_device,
          pageSize: this.pageSize,
          deviceName: this.search_device,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_device = result.total;
            this.list_device = result.records;
            console.log(this.list_device);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    addDevice() {
      this.dialogVisible = true;
      this.showComp = true;
    },

    // 租赁信息
    getRentList(page = 1) {
      this.pageNo = page;
      userRequest
        .getRentList({
          pageNo: this.pageNo_rent,
          pageSize: this.pageSize,
          rentUser: this.search_rent,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_rent = result.total;
            this.list_rent = result.records;
            console.log(this.list_rent);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    addRent() {
      this.dialogVisible = true;
      this.showComp = true;
    },

    deleteRent(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userRequest.deleteRent(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getRentList();
            }
          });
        })
        .catch(() => {});
    },

    // 导出租赁合同信息
    outPut(item) {
      window.location.href =
        axios.defaults.baseURL + "manage/rent/output/" + item.id;
    },

    // 客户列表
    getCustomerList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getCustomerList({
          pageNo: this.pageNo_customer,
          pageSize: 100,
          name: this.search2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_customer = result.total;
            this.list2 = result.records;
            console.log(this.list2);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    petImage(custom) {
      var url =
        axios.defaults.baseURL + "centre/centre/file/getPhoto/" + custom.photo;
      console.log(url);
      return url;
    },

    showInfo() {
      this.$alert("内容", "客户信息", {
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

    if (this.userinfo == null || this.userinfo == "") {
      // 如果没有用户信息就进不来此页面
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "需要登录才能访问哦",
        type: "warning",
      });
    } else {
      if (this.userinfo.type == "admin") {
        this.$router.push({ path: "/adminhome" });
      }
      if (this.userinfo.type == "user") {
        this.$router.push({ path: "/" });
      }
      //头部展示name
      this.username = this.userinfo.userName;
    }
    this.getHouseList();
    this.getChargeList();
    this.getDeviceList();
    this.getRentList();
  },
};
</script>

<style lang="scss" scoped>
@import "../css/userHome.scss";
.item {
  margin: 25px 100px 0 0;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding-top: 10px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-list {
  width: 80%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;

  .card-item {
    width: 300px;
    height: 400px;
    margin: 30px 0 0 110px;
    border: 1px solid rgb(237, 236, 236);
    border-radius: 5px 5px 5px 5px;
    background-color: rgb(254, 251, 251);

    .card-img {
      width: 302px;
      height: 300px;
      position: relative;
      right: 1px;
      bottom: 1px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px 5px 0 0;
      }
    }

    .card-title {
      padding-left: 10px;
      margin-top: 20px;
      color: rgb(40, 38, 38);
    }

    .card-bottom {
      padding: 0 10px 0 10px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .card-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 75%;
        color: rgb(109, 106, 106);
        font-size: 14px;
      }
    }
  }
}
</style>
